import useUserStore from "@/store/user"

const Child1 = () => {
  const updateRole = useUserStore((state) => (state.updateRole))
  return (
    <div style={{width: '400px', height: '300px', border: '1px solid green'}}>
      <div>A组件</div>
      <button onClick={() => updateRole('role123')}>改变状态</button>
    </div>
  )
}
export default function StatusHandling() {
  const role = useUserStore(state => (state.role))
  return (
    <>
      <h1>StatusHandling</h1>
      <Child1 />
      <div style={{marginTop: '40px', marginLeft: '40px'}}>角色1: {role.role1}</div>
      <div style={{marginTop: '40px', marginLeft: '40px'}}>角色2: {role.role2}</div>
    </>
  )
}